<template>
	<el-config-provider :locale="locale" :size="size">
		<!-- 开启水印 -->
		<el-watermark
			v-if="watermarkEnabled"
			:content="defaultSettings.watermarkContent"
			:font="{ color: fontColor }"
			:z-index="9999"
			class="wh-full"
		>
			<router-view/>
		</el-watermark>
		<!-- 关闭水印 -->
		<router-view v-else/>
	</el-config-provider>
</template>

<script lang="ts" setup>
import {useAppStore, useSettingsStore} from "./store";
import defaultSettings from "./settings";
import {ThemeEnum} from "./enums/ThemeEnum";
import {SizeEnum} from "./enums/SizeEnum";

const appStore = useAppStore();
const settingsStore = useSettingsStore();

const locale = computed(() => appStore.locale);
const size = computed(() => appStore.size as SizeEnum);
const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);

// 明亮/暗黑主题水印字体颜色适配
const fontColor = computed(() => {
	return settingsStore.theme === ThemeEnum.DARK
		? "rgba(255, 255, 255, .15)"
		: "rgba(0, 0, 0, .15)";
});
</script>
